<template>
	<view class="detail card">
		<view class="flex flex-col justify-between flex-1 h-full">
			<view class="record-content">
				<!-- <view class="flex title justify-between" @click="() => (isCollapse = !isCollapse)">
					<text>耗材信息</text>
				</view> -->
				<!-- // <view v-show="!taskInfo?.consumeCode" class="flex justify-start" style="margin:10px 0 30px 0">暂无耗材信息，请录入耗材编号</view> -->
				<view class="record-item" v-show="taskInfo?.code">
					<text>模具编码</text>
					<text>{{ taskInfo?.code || '' }}</text>
				</view>
				<view class="record-item" v-show="taskInfo?.projectMouldDTO?.equipCode">
					<text>设备编码</text>
					<text>{{ taskInfo?.projectMouldDTO?.equipCode || '' }}</text>
				</view>
				<view class="record-item" v-show="taskInfo?.projectMouldDTO?.materialGroup">
					<text>物料组</text>
					<text>{{ taskInfo?.projectMouldDTO?.materialGroup || '' }}</text>
				</view>
				<view class="record-item" v-show="taskInfo?.projectMouldDTO?.materialCode">
					<text>物料</text>
					<text>{{ taskInfo?.projectMouldDTO?.materialCode || '' }}</text>
				</view>
				<view class="record-item" v-show="taskInfo?.projectMouldDTO?.processCode">
					<text>工序</text>
					<text>{{ taskInfo?.projectMouldDTO?.processCode || '' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup name="ConsumablesDetachInfo">
const props = defineProps({
	taskInfo: {
		type: Object,
		default: () => {}
	}
});

const { taskInfo } = toRefs(props);

// 是否折叠
const isCollapse = ref(false);
</script>

<style lang="scss" scoped>
.card {
	background-color: #fff;
	margin: 10px 10px;
	border-radius: 8px;
	padding: 12px 12px;
	transition: all 300ms ease;
	box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
}
.title {
	font-size: 16px;
	margin: 6px 0 14px;
	font-weight: bold;
	.u-icon {
		margin-right: 3px;
	}
}
.record-item {
	font-size: 14px;
}
.record-content .record-item > :first-child {
	min-width: 70px;
}
</style>
